@extends('admin.common.main')
@section('css')
    {{--webuploader样式--}}
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css" />

@endsection
@section('cnt')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 文章管理 <span class="c-gray en">&gt;</span> 添加文章 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>

    <article class="page-container">
        @include('admin.common.validate')
        {{--同步上传--}}
        {{--        <form action="{{route('admin.article.store')}}" method="post" enctype="multipart/form-data" class="form form-horizontal"  @submit.prevent="dopost">--}}
        {{--异步上传    --}}
        <form action="{{route('admin.article.update',$article)}}" ref="frm"   class="form form-horizontal"  @submit.prevent="dopost">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章标题：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    {{--v-model.lazy 延时绑定--}}
                    <input type="text" class="input-text" placeholder=""  name="title" v-model="info.title">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章摘要：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    {{--v-model.lazy 延时绑定--}}
                    <input type="text" class="input-text" placeholder=""  name="desn" v-model="info.desn">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章封面：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    {{--表单提交的封面地址--}}
                    <input type="hidden" class="input-text" placeholder=""  name="pic" id="pic" v-model="info.pic">
                    <div id="picker">上传文章封面</div>
                </div>
                <div class="formControls col-xs-4 col-sm-4">
                    <img :src="info.pic" id="img" style="width: 100px;position: absolute" >
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章内容：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    {{--v-model.lazy 延时绑定--}}
                    <textarea name="body" id="body"></textarea>
                </div>
            </div>


            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="button" @click="dopost" value="提交">
                </div>
            </div>
        </form>
    </article>
@endsection
@section('js')
    <!-- 引入vue -->
    <script src="/js/vue.js"></script>
    {{--webuploader js--}}
    <script src="/webuploader/webuploader.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>

    <script>
        new Vue({
            el : '.page-container',
            data : {
                info:{!! $article !!}
            },
            //组键挂载完毕
            mounted(){
                this.editor = UE.getEditor('body',{
                    initialFrameHeight:200,  //设置高度
                });
                //渲染完毕
                this.editor.addListener("ready",()=>{
                    this.editor.setContent(this.info.body)
                });
                //上传
                //初始化web uploader
                this.uploader = WebUploader.create({
                    //选完文件自动上传
                    auto:true,
                    // swf文件路径
                    swf: '/webuploader/js/Uploader.swf',

                    // 文件接收服务端。
                    server: '{{route('admin.article.upfile')}}',
                    //文件参数
                    formData:{
                        _token: '{{csrf_token()}}'
                    },
                    //文件上传表单名称
                    fileVal:'file',

                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick:{
                        id:'#picker',
                        //是否开启选择多文件能力
                        multiple:false,
                    } ,

                    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                    resize: false
                });
                // 文件上传成功，给item添加成功class, 用样式标记上传成功。回调方法
                this.uploader.on( 'uploadSuccess', ( file ,ret)=> {
                    let src = ret.url;
                    this.info.pic = src

                });
            },
            methods:{
              async  dopost(){
                  //获取内容
                  this.info.body = this.editor.getContent();

                  //json转字符串
                    var frmData =  JSON.stringify(this.info);
                    let ret = await fetch(this.$refs.frm.action,{
                        method:'PUT',
                        headers:{
                            'X-CSRF-TOKEN':'{{csrf_token()}}',
                            'Content-Type':'application/json'
                        },
                        body:frmData
                    });
                    let json = await  ret.json();

                    location.href = json.url;
                }
            }
        });

    </script>

@endsection